<template>
 <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待抢" name="first" >
          <runninglist :qiangbtn="qiangbtn" :hiddenbtn="hidbtn"></runninglist>
        </el-tab-pane>
        <el-tab-pane label="待取货" name="second">
          <runninglist :qiangbtn="qiangbtn" :hiddenbtn="hidbtn" :btntext="btntext" ></runninglist>
        </el-tab-pane>
        <el-tab-pane label="配送中" name="third" >
          <runninglist :qiangbtn="qiangbtn" :hiddenbtn="hidbtn" :btntext="btntext"></runninglist>
        </el-tab-pane>
        <el-tab-pane label="配送成功" name="fourth" >
          <runninglist :qiangbtn="qiangbtn" :hiddenbtn="hidbtn"></runninglist>
      </el-tab-pane>
    </el-tabs>
 </div>
</template>
<script>
import runninglist from '@/components/runninglist'
export default {
  components: {
    runninglist
  },
  data () {
    return {
      activeName: 'first',
      fullscreenLoading: false,
      hidbtn: false,
      btntext: '',
      qiangbtn: true
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(this.activeName)
      let tabname = this.activeName
      if (tabname === 'first') {
        this.hidbtn = false
        this.qiangbtn = true
      }
      if (tabname === 'second') {
        this.qiangbtn = false
        this.hidbtn = true
        this.btntext = '开始配送'
      }
      if (tabname === 'third') {
        this.qiangbtn = false
        this.hidbtn = true
        this.btntext = '配送成功'
      }
      if (tabname === 'fourth') {
        this.qiangbtn = false
        this.hidbtn = false
      }
    },
    myclick () {
      this.$axios({
        method: 'post',
        url: '/run.php/Index/index?action=delivering',
        data: {

        }
      }).then(response => {
        console.log(response.data)
      })
    }
  }
}
</script>
<style lang="stylus">
  .tabs
    padding-left 0.2rem
  .el-tabs>.el-tabs__header>.el-tabs__nav-wrap
    padding-left 0.8rem !important

</style>
